<template>
	<view class="money-time" >
<button @click="show=!show" class="all"><image src="../../static/money/timeSearch.png" mode=""></image><text>{{$t('money.time.timeQuery')}}</text></button>
		
		<view class="warp" v-show="show">
		<view class="box">
			{{$t('money.time.startTime')}}:
		<ruiDatePicker
		    fields="day"
		    start="2010-00-00 00:00:00"
		    end="2030-12-30 23:59:59"
		    :value="value"
		    @change="bindChange1"
		    @cancel="bindCancel1"
			class="Mtime"
		 ></ruiDatePicker>
		</view>
		<view class="box">
			{{$t('money.time.endTime')}}:
		 <ruiDatePicker
		     fields="day"
		     start="2010-00-00 00:00:00"
		     end="2030-12-30 23:59:59"
		     :value="value"
		     @change="bindChange2"
		     @cancel="bindCancel2"
		 	class="Mtime"
		  ></ruiDatePicker>
		</view>
		
		</view>
		<!-- 确定 取消 -->
		<view class="btns" v-show="show">
		<button type="default" class="none" @click="show=false">{{$t('money.time.calcel')}}</button>
		<button type="default" class="sure" @click="sure">{{$t('money.time.sure')}}</button>
		</view>
		
	</view>
</template>

<script>
	import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
	export default {
		
	    components: {ruiDatePicker},
		data(){
			return {
				value:'2020-09-09',
				startTime:'',
				endTime:'',
				show:false
			}
		},
		methods:{
			bindChange1(e){
				// 开始时间
				console.log(e);
				this.startTime=e
			},
			bindCancel1(e){
				console.log(e);
			},
			bindChange2(e){
				// 结束时间
				console.log(e);
				this.endTime=e
			},
			bindCancel2(e){
				console.log(e);
			},
			sure(){
				console.log(this.startTime,this.endTime);
				this.show=false;
				
			}
		}
	}
</script>

<style>
.money-time{
	background-color: #FFFFFF;
}
.warp{
	width: 98%;
	display: flex;	
	flex-direction: row;	
	justify-content: space-evenly;
	margin: auto;
	margin-bottom: 90rpx;
	background-color: #FFFFFF;
	
}
.Mtime{
	width: 218rpx;
}
.box{
	display: flex;
	align-items: center;
	font-size: .8em;
}
.btns{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
	top: -80rpx;
}
.none{
	background-color: #d34600;
}
.sure{
	background-color: #007AFF;
}

.btns>button{
	width: 200rpx;
	height: 60rpx;
	line-height: 60rpx;
	color: #FFFFFF;
	}
	.all{
		width: 284rpx;
		height: 60rpx;
		margin: 40rpx 0;
		line-height: 60rpx;
		position: relative;
		left: 428rpx;
		top: 0px;
	}
	.all>image{
		width: 44rpx;
		height: 44rpx;
		margin-left: -32rpx;
		margin-right: 10rpx;
		/* line-height: 30px; */
		padding-top: 10rpx;
	}
	.all>text{
		position: relative;
		top: -10rpx;
		left: 10rpx;
	}
</style>
